<template>
	<div id="newsDetail">
		<v-header>
			<price-header></price-header>
		</v-header>
		<v-content class="width-1200">
			<div class="title">
				<span class="color-blue hover" @click="changeRouter('/news')">资讯频道></span>
				<span>{{title}}</span>
			</div>
			<div class="title-place"></div>
			<div class="info">
				<div>
					<div class="title"><span>{{modelData.articleTitle}}</span></div>
					<div class="time my-flex-between">
						<span></span>
						<span>{{modelData.createTime | formNewsDate}}</span>
					</div>
					<div class="img">
						<img class="bgback" :src="modelData.articleCoverUrl" alt="" />
						<template v-if="modelData.sourceUrl">
							<img class="playicon" @click.stop="playStart($event,0,modelData)" src="../../assets/news/icon_home_suspend@2x.png" />
							<video v-show="isPlay" preload="auto" controls="" loop="loop" class="video" style="width: 100%;height: 100%;" :src="modelData.sourceUrl"></video>
						</template>

					</div>
					<div class="content" v-html="modelData.articleContent"> </div>
				</div>
			</div>
			<!--评论-->

			<div class="conments" v-if="type==1">
				<!--发表评论-->
				<div class="my-reply">
					<el-input maxlength="80" v-model="articleCommentContent" placeholder="请输入内容"></el-input>
					<li @click="sendMyComments" class="submit my-btn">发送</li>
				</div>

				<div class="lists">
					<li class="one-list" v-for="item in tableData">
						<div class="left">
							<img v-if="item.headImgUrl" :src="item.headImgUrl" onerror="portraitError(event)" alt="" />
							<img v-else src="../../assets/centers/touxiang.jpg" alt="" />
						</div>
						<div class="right">
							<div class="name">
								<span>{{item.shortName}}</span>

								<span class="color-blue">
									<template v-if="item.articleCommentParentUserId">
										@{{item.replyName}}
									</template>
								</span>

							</div>
							<div class="content two-row">
								<span>{{item.articleCommentContent}}</span>
							</div>
							<div class="time my-flex-between">
								<span>{{item.createTime}}</span>
								<div class="zan my-flex-right">
									<div>
										<img @click="reply($event,item)" class="hover" src="../../assets/news/message.png" alt="" />
									</div>
								</div>
							</div>
							<!--回复-->
							<div class="reply">
								<div class="name">@{{params.shortName}}: </div>
								<el-input type="textarea" maxLength='100' autosize autofocus v-model="params.articleCommentContent"></el-input>
								<li @click="sendComments" class="submit my-btn">发送</li>
							</div>
						</div>
					</li>
				</div>
			</div>

		</v-content>
	</div>
</template>

<script>
	import service from '@/js/services/news';
	export default {
		name: 'news',
		data() {
			return {
				url: 'http://pic.58pic.com/58pic/15/68/59/71X58PICNjx_1024.jpg',
				id: 1,
				modelData: {},
				tableData: [],
				type: 0,
				params: {
					articleId: '', //文章id
					articleCommentContent: null, //评论内容
					articleCommentParentId: null, //目标评论的id
					articleCommentParentUserId: null, //目标评论人的id
					shortName: null
				},
				articleCommentContent: null, //对文章评论
				isPlay: false,
				pageNum: 1,
				total: 0
			}

		},
		computed: {
			title() {
				if(this.type == 0) {
					return '公告详情';
				} else if(this.type == 1) {
					return '新闻详情';
				} else if(this.type == 2) {
					return '留成会客厅详情';
				}
			}
		},
		mounted() {

			if(this.$route.query.id) {
				this.id = this.$route.query.id;
				this.type = this.$route.query.type;
			}
			this.getNewsDetail();
			this.getNewsCommentsPage();
			this.$nextTick(() => {
//				window.addEventListener('scroll', this.scrollEnd, false);
//				window.addEventListener('scroll', debounce(this.scrollEnd, 200), false);
				window.onscroll = debounce(this.scrollEnd, 200)

			})
		},
		methods: {
			...service,
//			debounce(event){
//				debounce(this.scrollEnd, 200)
//			},
			scrollEnd(){	
				console.log($(window).scrollTop() + $(window).innerHeight())
				if($(window).scrollTop() + $(window).innerHeight() >= document.body.scrollHeight - 10) {
					this.getNewsCommentsPage();
				}
			},
			changeRouter(url) {
				this.$router.push(url);
			},
			reset() {
				$('.reply').slideUp();
			},
			reply(ev, item) {
				this.params.articleId = item.articleId;
				this.params.articleCommentParentId = item.id;
				this.params.articleCommentParentUserId = item.articleCommentUserId;
				this.params.articleCommentContent = null;
				this.params.shortName = item.shortName;

				$('.reply').slideUp();

				let dom = this.tool.getTargetDom($(ev.target), 'right').find('.reply');
				if(dom.css('display') == 'none') {
					dom.slideDown()
				} else {
					dom.slideUp();
				}
			},
			async sendMyComments() {
				this.params.articleCommentParentId = null;
				this.params.articleCommentParentUserId = null;
				this.params.articleCommentContent = this.articleCommentContent;
				await this.sendComments();
				this.articleCommentContent = null;

			},
			playStart(ev, index, item) {
				let self = this;
				var target = ev.target;
				var dom = this.tool.getTargetDom($(ev.target), 'img');
				var video = $('.video')[0];
				var bgimg = dom.find('.bgback')[0];
				var playicon = ev.target;
				if(video.paused) {
					this.isPlay = true;
					video.play();
					bgimg.style.visibility = 'hidden';
					playicon.style.display = "none";
				} else {
					video.pause();
					this.isPlay = false
					bgimg.style.visibility = "visible";
					playicon.style.display = "block";

				}

			}
		},
		beforeRouteLeave(to, from, next) {
			window.removeEventListener('scroll',debounce,false);
			next();
		}
	}
</script>

<style lang="less" src="../../less/page/news/detail.less"></style>